<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ThinkPHP网站</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/mystyle.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/reset.css">
    <script type="text/javascript" src="__JS__/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#menu_pop_out").hide();
        $("#pop_out_father").mouseover(function(){
            $("#menu_pop_out").show();
        });
        $("#pop_out_father").mouseout(function(){
            $("#menu_pop_out").hide();
        });
    });
    </script>
</head>
    
<body>
    <!-- 1803010340导航栏区域 -->
    <div id="top-link">
        <ul>
            <img src="__IMG__/logo.PNG" width="70px" >
             <li><a href="{:url('yangxt_forum/index/index')}">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="{:url('yangxt_forum/index/changepa')}">修改密码</a></li>
            <li><a href="{:url('yangxt_forum/index/me')}">上传头像</a></li>
            <li id="pop_out_father"><a href="{:url('yangxt_forum/index/view')}">论坛</a>
                <ul id="menu_pop_out">
                    <li><a href="{:url('yangxt_forum/index/view')}">全部</a></li>
                    {volist name="sec" id="secRow"}
                    <li><a href="{:url('yangxt_forum/index/view',['sid'=>$secRow.sid])}">{$secRow.sname}</a></li>
                    {/volist}
                </ul>
            </li>
            <li><a href="{:url('yangxt_forum/user/contact')}">联系我们</a></li>
            <li><a href="{:url('yangxt_forum/user/login')}">登录</a></li>
            <li><a href="{:url('yangxt_forum/user/reg')}">注册</a></li>
            <li><a href="{:url('yangxt_forum/index/logOut')}">注销</a></li>
            
            <input type="text" name="search" placeholder="全站搜索..." class="blue-input">
            <button id="search">搜索</button>
            {neq name="Think.session.unick" value=""}
            <li style="color:red;">欢迎您：{$Think.session.unick} <img src="__IMG__/portrait/{$Think.session.uimg}" alt="" width="24px;"></li>
            {/neq}
        </ul>
    </div>
    <!-- 1803010340content区域 -->
    <main id="index-content">
    <style type="text/css">
        #parent{
            position: relative;
            margin: 50px auto;
            padding: 0;
            width: 1000px;
            height: 309px;
            float: left;
        }

        #uls{
            position: relative;
            margin: 0;
            padding: 0;
            width: 1000px;
            height: 309px;
            overflow: hidden;
        }

        #img_ul{
            position: relative;
            margin: 0;
            padding: 0;
            left: 0;
            top: 0;
            width: 10000px;
            list-style: none;
        }
        #img_ul li{
            float: left;
            margin: 0;
            padding: 0;
            width: 1000px;
            height: 309px;
        }
        #img_ul li img{
            width: 1000px;
            height: 309px;
        }

        #litCir_ul{
            position: absolute;
            margin: 0;
            padding: 0;
            right: 10px;
            bottom: 10px;
            list-style: none;
        }
        #litCir_ul li{
            margin: 0;
            padding: 0;
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 50%; 
            margin-left:10px ;
            cursor: pointer;
        }

        li.active{
            display: none;
            background-color: white;
        }
        li.quiet{
            display: none;
            background-color: white;
        }

        #buttons{
            margin: 0;
            padding: 0;
            display: none;
        }
        #buttons span{
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            margin-top: -20px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: Simsun;
            font-size: 30px;
            border: 1px solid #fff;
            opacity: 0.3;
            cursor: pointer;
            color: #fff;
            background: black;
        }
        #left{
            left: 5px;
        }
        #right{
            left: 100%;
            margin-left: -45px;
        }
        #texts{
            
        }
    </style>
    <div id= "parent">
        <div id="uls">
            <ul id="img_ul">
            {volist name='advshow' id='advrow'}
            <li><a href="http://localhost:8080/08yangxt/public/yangxt_forum/index/detail/mid/{$advrow.apath}" target="_blank"><img src="__IMG__/adv/{$advrow.aimg}"></a></li>
            {/volist}
            </ul>
            <ul id='litCir_ul'></ul>
        </div>
        <div id="buttons">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
    <div id="texts">
        <ul id="texts_ul">
            {volist name='advshow' id='advrow'}
            <li class="texts_adv" style="display:none"><span>标题：{$advrow.atitle}</span><br><span>文字介绍：{$advrow.acontent}</span></li>
            {/volist}
        </ul>
    </div>
    <script type="text/javascript">

    document.getElementsByClassName('texts_adv')[0].setAttribute("style","display:inline;")

    </script>
    <script type="text/javascript">
        window.onload = function(){
            /*获取HTML中的对象*/
            var parent = document.getElementById("parent");
            var img_ul = document.getElementById("img_ul");
            var litCir_ul = document.getElementById("litCir_ul");
            var buttons = document.getElementById("buttons");

            var texts_ul = document.getElementById("texts_ul");
            var tLis = texts_ul.children;

            var cLis = litCir_ul.children;

            var len = img_ul.children.length;     //图片张数
            var width = parent.offsetWidth;       //每张图片的宽度
            var rate = 15;                        //一张图片的切换速度，单位为px
            var times = 1;                        //切换速度的倍率
            var gap = 2000;                       //自动切换间隙，单位为毫秒
            var timer = null;                     //初始化一个定时器
            var picN = 0;                         //当前显示的图片下标
            var cirN = 0;                         //当前显示图片的小圆点下标
            var now;
            var then = Date.now();
            var temp;

            /*克隆第一个li到列表末*/
            img_ul.appendChild(img_ul.children[0].cloneNode(true));
            
            for (var i=0; i<len; i++){
                var a_li = document.createElement("li");
                a_li.className = 'quiet';
                litCir_ul.appendChild(a_li);
            }
            litCir_ul.children[0].className = "active";

            function autoRoll(){
                now = Date.now();
                var t = now - then;
                if(t >= gap){
                    if(Roll(-(picN+1)*width)){
                        picN++;
                        cirN++;
                        then = Date.now();
                    }
                    for(var i=0; i<len; i++){
                        cLis[i].className = "quiet";
                        tLis[i].style.display = 'none';
                    }
                    if(cirN == len){
                        cirN = 0;
                    }
                    cLis[cirN].className = "active";
                    tLis[cirN].style.display = 'inline';                    
                    if(picN>=len){
                        img_ul.style.left = 0;
                        picN = 0;
                    }
                }
                timer = requestAnimationFrame(autoRoll); 
            }
            autoRoll();

            parent.onmouseover = function(){
                cancelAnimationFrame(timer);
                buttons.style.display = 'block';

            }
            parent.onmouseout = function(){
                timer = requestAnimationFrame(autoRoll);
                buttons.style.display = 'none';
            }

            for(var i=0; i<len; i++){
                cLis[i].index = i;
                cLis[i].onmouseover = function(){
                    var flag = 0;
                    var rollN = this.index;
                    for(var j=0; j<len; j++){
                        cLis[j].className = "quiet";
                        //tLis[j].style.display = 'none';
                    }
                    this.className = "active";
                    tLis[i].style.display = 'inline';                      
                    temp = cirN;                           //当前active点
                    picN = cirN = this.index;
                    console.log('this.index:'+this.index);
                    times = Math.abs(this.index - temp);  //距离上个小圆点的距离
                    if(times == 0){
                        return;
                    }
                    console.log('times:'+times);
                    rate = rate*times;                    //根据距离改变切换速率
                    
                    function rollTo(){
                        cancelAnimationFrame(img_ul.timer);
                        if(Roll(-rollN * width)){
                            flag++;
                            if(flag == times){
                                cancelAnimationFrame(img_ul.timer);
                                rate = 15;
                                return;
                            }
                        }
                        img_ul.timer = requestAnimationFrame(rollTo);
                    }
                    rollTo();
                }
            }

            /*上一张*/
            buttons.children[0].onclick = previous;
            /*下一张*/
            buttons.children[1].onclick = next;

            function next(){
                cancelAnimationFrame(img_ul.timer);
                if(Roll(-(picN+1)*width)){
                    cancelAnimationFrame(img_ul.timer);
                    picN++;
                    cirN++;
                    for(var i=0; i<len; i++){
                        cLis[i].className = "quiet";
                        tLis[i].style.display = 'none'; 
                    }
                    if(cirN == len){
                        cirN = 0;
                    }
                    cLis[cirN].className = "active";
                    tLis[cirN].style.display = 'inline';                    
                    if(picN>=len){
                        img_ul.style.left = 0;
                        picN = 0;
                    }
                    return;
                }
                img_ul.timer = requestAnimationFrame(next);
            }

            function previous(){
                if(picN<=0){
                    img_ul.style.left = -len*width + "px";
                    picN = len;
                }
                cancelAnimationFrame(img_ul.timer);
                if(Roll(-(picN-1)*width)){
                    cancelAnimationFrame(img_ul.timer);
                    picN--;
                    cirN--;
                    for(var i=0; i<len; i++){
                        cLis[i].className = "quiet";
                        tLis[i].style.display = 'none';
                    }
                    if(cirN < 0){
                        cirN = len-1;
                    }
                    cLis[cirN].className = "active";
                    tLis[cirN].style.display = 'inline'; 
                    return;
                }
                img_ul.timer = requestAnimationFrame(previous);
            }

            function Roll(distance){
                var speed = img_ul.offsetLeft < distance ? rate:(0-rate);
                    img_ul.style.left = img_ul.offsetLeft + speed + "px";
                    var leave = distance - img_ul.offsetLeft;
                    if(Math.abs(leave)<=Math.abs(speed)){
                        img_ul.style.left = distance+"px";
                        return 1;                             //切换完一张图片
                    }
                return 0;
            }
        }
    </script>
        <div id="index-left">
            <div id="index-left-top">
                <h2>
                    <img src="__IMG__/index1.jpg">
                    最新话题 
                    <a href="">更多>></a>
                </h2>
            </div>
            <table id="index-table">
                <thead>
                    <tr>
                        <td style="text-align: center;">话题</td>
                        <td>序号</td>
                        <td>主题</td>
                        <td>时间</td>
                        <td>作者</td>
                    </tr>
                </thead>
                    {volist name="topMes" id="topMesrow"}
        
                    <tr>
                        <td>{$key+1}</td>
                        <td><a href="{:url('index/detail',['mid'=>$topMesrow.mid])}">{$topMesrow.mtitle}</a></td>
                        <td>{$topMesrow.mcreateat | date="Y-m-d     H:i:s",###}</td>
                        <td>{$topMesrow.unick}</td>
                    </tr>
                    {/volist}
            </table>
        </div>
        <div style="float: right;width:300px;display:inline;">
            {volist name='adv' id='advrow'}
            <a href="http://{$advrow.apath}" target="_blank"><img src="__IMG__/adv/{$advrow.aimg}" style="width:300px;"></a>
            {/volist}
        </div>
    </main>
    <!-- 1803010340footer底部区域 -->
    <footer id="footer">
        <div id="col">
            <div id="col-1">
                <h3><img src="__IMG__/footer1.png"> 我们</h3>
                <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">公司动态</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">免责声明</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">捐赠我们</a></li>
            </ul>
            </div>
            <div id="col-2">
                <h3><img src="__IMG__/footer2.png"> 合作</h3>
                <ul>
                <li><a href="#">技术培训</a></li>
                <li><a href="#">广告合作</a></li>
                <li><a href="#">项目合作</a></li>
                <li><a href="#">投资合作</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">商务合作</a></li>
            </ul>
            </div>
            <div id="col-3">
                <h3><img src="__IMG__/footer3.png"> 信息</h3>
               <ul>
                <li><a href="#">RSS订阅</a></li>
                <li><a href="#">投稿指南</a></li>
                <li><a href="#">网站帮助</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
            </div>
            <div id="col-4">
                <h3><img src="__IMG__/footer4.png"> 技术学习</h3>
                <ul>
                    <li>
                        ① <a href="">4241653</a> 
                        ② <a href="">4829703</a> 
                        ③ <a  href="">4958407</a> 
                        ④ <a  href="">5476028</a> 
                        ⑤ <a  href="">5478523</a> 
                        ⑥ <a  href="">5604716</a> 
                        ⑦ <a  href="">5629416</a> 
                        ⑧ <a  href="">6419794</a> 
                        ⑨ <a  href="">7415106</a> 
                        ⑩ <a  href="">7594839</a> 
                    </li>
                </ul>
            </div>
            
        </div>
        <hr id="border"/>
        <!-- 1803010340footer-bottom版权信息区域 -->
        
    </footer>      
</body>
</html>